<template>
  <footer class="bg-dark text-white py-10">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center">
              <i class="fa fa-picture-o text-primary text-lg"></i>
            </div>
            <h3 class="text-lg font-bold">漫文生成</h3>
          </div>
          <p class="text-gray-400 text-sm">
            用AI将小说转化为漫画，让文字焕发新的生命力
          </p>
        </div>
        
        <div>
          <h4 class="font-bold mb-4">功能</h4>
          <ul class="space-y-2 text-gray-400 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">小说转漫画</a></li>
            <li><a href="#" class="hover:text-white transition-colors">风格定制</a></li>
            <li><a href="#" class="hover:text-white transition-colors">作品集管理</a></li>
            <li><a href="#" class="hover:text-white transition-colors">高清下载</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold mb-4">支持</h4>
          <ul class="space-y-2 text-gray-400 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">使用教程</a></li>
            <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold mb-4">关注我们</h4>
          <div class="flex gap-3 mb-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
          <p class="text-gray-400 text-sm">订阅获取最新功能更新</p>
          <div class="mt-2 flex">
            <input type="email" placeholder="你的邮箱" class="px-3 py-2 rounded-l-lg bg-gray-700 text-white text-sm w-full focus:outline-none focus:ring-1 focus:ring-primary">
            <button class="bg-primary px-3 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p>© 2023 漫文生成 - 让文字变成漫画的神奇工具</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 页脚组件逻辑
</script>